import Action from './Action.js';

class Render{
  constructor(ctx,arr){
    this.ctx = ctx;
    this.data = arr;
    //左右边界
    this.margin = 20;
    //面板到顶部的距离
    this.top = 200;
    //小方块之间的间距
    this.space = 13;
    //手指按下时的坐标点
    this.dot = {};
    this.action = new Action(arr,ctx);
  }
  drawSquare(){
    //绘制小方块
    this.ctx.fillStyle ='#CDC1B4';
    this.data.forEach((row,rowIndex) =>{
      row.forEach((column,columnIndex) =>{
        let edg = (this.ctx.canvas.width - 2 * this.margin - 5 * this.space) / 4;
        //小方块左上角的坐标
        let x = this.margin + this.space + (edg + this.space) *columnIndex;
        let y = this.top + this.space +(edg +this.space) * rowIndex;
        //绘制小方块
        this.ctx.fillStyle = '#CDC1B4';
        if (column === 2) {
          this.ctx.fillStyle = '#eee4da';
        } else if (column === 4) {
          this.ctx.fillStyle = '#ede0c8';
        } else if (column === 8) {
          this.ctx.fillStyle = '#f2b179';
        } else if (column === 16) {
          this.ctx.fillStyle = '#f59563';
        } else if (column === 32) {
          this.ctx.fillStyle = '#f67c5f';
        } else if (column === 64) {
          this.ctx.fillStyle = '#f65e3b';
        } else if (column === 128) {
          this.ctx.fillStyle = '#edcf72';
        } else if (column === 256) {
          this.ctx.fillStyle = '#edcc61';
        } else if (column === 512) {
          this.ctx.fillStyle = '#edc850';
        } else if (column === 1024) {
          this.ctx.fillStyle = '#edc53f';
        } else if (column === 2048) {
          this.ctx.fillStyle = '#edc22e';
        }
        this.ctx.fillRect(x, y, edg, edg);
        //绘制小方块中的数字
        if(column >0){
          this.ctx.fillStyle = '#fff';
          this.ctx.font = '34px 微软雅黑';
          this.ctx.textAlign ='center';
          this.ctx.fillText(column,x + edg/2,y + edg /1.5);
        }
      })
    })
  }
  //背景图绘制
  drawBg(){
    //绘制背景效果
    this.ctx.fillStyle = '#faf8ef';
    this.ctx.fillRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height);
    //绘制面板背景
    this.ctx.fillStyle = '#bbada0';
    let edg = this.ctx.canvas.width - 2 * this.margin;
    this.ctx.fillRect(this.margin,this.top,edg,edg);
    //添加面板的圆角效果
    this.ctx.lineWidth = 10;
    this.ctx.lineJoin ='round';
    this.ctx.strokeStyle ='#bbada0';
    this.ctx.strokeRect(this.margin, this.top, edg, edg);
  }
  //事件监听
  listen(){
    //监听触屏事件
    this.ctx.canvas.addEventListener('touchstart',(e) =>{
      //手指按下时触发
      //记录按下时手指的坐标
      let touch = e.changedTouches[0];
      this.dot.x = touch.clientX;
      this.dot.y = touch.clientY;
    })
    this.ctx.canvas.addEventListener('touchend', (e) => {
      //手指离开时触发
      let touch = e.changedTouches[0];
      //手指离开时的坐标
      let x = touch.clientX;
      let y = touch.clientY;
      //判断是水平滑动还是垂直滑动：哪个方向偏移最大
      if (Math.abs(x - this.dot.x)- Math.abs(y - this.dot.y) >0){
        //水平滑动  
        if(x > this.dot.x){
          //向右合并
          this.action.rightAction();
          //插入数字
          this.action.insertNumber();
          //重新绘制
          this.drawSquare();
        }else{
          //向左合并
          this.action.leftAction();
          //插入数字
          this.action.insertNumber();
          this.drawSquare();

        }
      }else{
        //垂直滑动
        if (y > this.dot.y) {
          //向上合并
          this.action.downAction();
          //插入数字
          this.action.insertNumber();
          //重新绘制
          this.drawSquare();
        } else {
          //向上合并
          this.action.upAction();
          //插入数字
          this.action.insertNumber();
          //重新绘制
          this.drawSquare();
        }
      }
      console.log(this.action.newpostions.length);
      console.log(this.action.status);
      if(this.action.newpostions.length ===0 && this.action.status ===false){
        wx.showModal({
          title: '再来一局',
          content: '',
          confirmText: '是',
          cancelText: '否',
          success:(res) => {
            console.log('点击是');
            if (res.confirm) {
              this.data = [
                [0, 0, 2, 0],
                [0, 8, 0, 8],
                [0, 0, 4, 0],
                [16, 0, 0, 8]
              ];
              this.drawBg();
              this.drawSquare();
              this.action = new Action(this.data);
            } else if (res.cancel) {
              wx.showToast({
                title: '游戏结束',
              })
            }
          }
        })
      }
    })
  }

}

export default Render;